<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="box-card">
        <!-- 面试技巧 -->
        <div slot="header" class="clearfix">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="ruleForm"
          >
            <el-form-item label="关键字" prop="user">
              <el-input
                clearable
                v-model="formInline.user"
                @clear="created"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="region">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="cleard">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-button
              style="float: right"
              type="success"
              icon="el-icon-edit"
              @click="show"
              >新增技巧</el-button
            >
          </el-form>
          <el-alert
            :title="'数据一共' + counts + '条'"
            type="info"
            show-icon
            :closable="false"
          ></el-alert>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            label="序号"
            width="90"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="300">
          </el-table-column>
          <el-table-column label="" width="50">
            <template #default="{ row }">
              <i :class="{ 'el-icon-film': row.videoURL }" style="color:blue" @click="icon(row.videoURL)"></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ row.state === 1 ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button type="text" width="100%" @click="yulan(row)"
                >预览</el-button
              >
              <el-button type="text" width="100%" @click="cli(row)">{{
                row.state === 1 ? "启用" : "禁用"
              }}</el-button>
              <el-button
                type="text"
                width="100%"
                :disabled="row.state === 1"
                @click="edit(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                width="100%"
                :disabled="row.state === 1"
                @click="del(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页效果 -->
        <div
          class="pager"
          style="margin: 10px; display: flex; justify-content: flex-end"
        >
          <el-pagination
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout="sizes,prev,pager,next,jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <preview :showDialog.sync="yulanDialog" ref="preview"></preview>
    <add :showDialog.sync="showDialog" ref="add"></add>
    <!-- <el-dialog fullscreen="true" modal="true" :visible="icons" style="color:#ccc" top="100px" width="0">
      haha
  </el-dialog> -->
      <div class="video" v-if="icons">
      <div class="close">
        <span class="el-icon-close" @click="cat"></span>
      </div>
      <div class="box">
        <video :src="list.videoURL" class="vi" controls autoplay></video>
      </div>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import add from '@/module-hmmm/components/articles-add.vue'
import preview from '@/module-hmmm/components/articles-preview.vue'

export default {
  components: {
    add,
    preview
  },
  data () {
    return {
      icons: false,
      showDialog: false,
      yulanDialog: false,
      // 禁用状态
      formInline: {
        user: '',
        region: ''
      },
      counts: 0, // 一共多少条数据
      // 当前页面
      page: 1,
      // 总页数
      pages: 2,
      // 页尺寸
      pagesize: 5,
      creatorID: '',
      state: '', // 按钮状态0禁用1开启
      username: '', // 录入人
      visits: '', // 浏览数
      createTime: '', // 时间
      // 列表渲染数据
      tableData: [],
      list: {
        articleBody: '', // 文章正文
        id: '',
        title: '', // 文章标题
        videoURL: '' // 视频
      },
      yulanlist: {},
      shauxuan: []
    }
  },
  // 页面加载执行
  async created () {
    await this.creatData()
  },
  computed: {},
  methods: {
    // 关闭video
    cat () {
      this.icons = false
      // this.list.videoURL = null
      console.log(1)
    },
    // viedo
    icon (videoURL) {
      this.icons = true
      if (this.list.videoURL !== null) {
        this.list.videoURL = videoURL
        // const vi = document.querySelector('vi')
        // vi.style.display = 'none'
        // vi.play()// 自动播放
      } else {
        this.list.videoURL = null
        const box = document.querySelector('box')
        box.style.display = 'none'
      }
      // this.list.videoURL = videoURL
      console.log(this.list.videoURL)
    },
    // 预览
    yulan (row) {
      this.yulanDialog = true
      this.yulanlist = row
      this.username = row.username
      console.log(this.username)
      this.$refs.preview.yulan()
    },
    // 修改功能
    async edit (row) {
      this.list = row
      this.$refs.add.edits()
      // const data = await update({ id: row.id, title: row.title, articleBody: row.articleBody, videoURL: row.videoURL })
      // const res = data.config.data
      // this.showDialog = true
      // console.log(res)
      // this.title = res.title
      // this.articleBody = res.articleBody
      // this.videoURL = res.videoURL
      // console.log(data)
    },
    // 序列号
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    // 弹窗出现
    show () {
      this.showDialog = true
    },
    // 删除功能
    del (id) {
      this.$confirm('确认要删除嘛?', '提示')
        .then(async () => {
          await remove({ id })
          this.$message.success('删除成功')
          await this.creatData()
        })
        .catch(() => {})
    },
    // 点击禁用
    async cli (row) {
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
      this.creatData()
    },
    // 分页效果
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      this.page = 1
      this.creatData()
    },
    /**
     * 页码变化
     */
    handleCurrentChange (val) {
      this.page = val
      this.creatData()
    },
    // 页面加载展示
    async creatData () {
      // console.log(this.pagesize)
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      console.log(this.tableData)
      this.counts = data.counts
    },
    // 搜索功能
    async onSubmit () {
      // console.log('submit!')
      // if (this.formInline.user) {
      //   this.tableData = this.tableData.filter(item => {
      //     if (item.title.includes(this.formInline.user)) {
      //       return item
      //     }
      //   })
      // }
      if (this.formInline.region === '禁用') {
        this.formInline.region = 0
      } else if (this.formInline.region === '启用') {
        this.formInline.region = 1
      }

      // console.log(this.formInline.region)
      const { data } = await list({
        keyword: this.formInline.user,
        state: this.formInline.region
      })
      console.log(data)
      this.tableData = data.items
      if (this.formInline.region === '' || this.formInline.user === '') {
        this.created()
      }
      this.counts = data.items.length
      this.cleard()
      // console.log(this.tableData)
      // this.cleard()
    },
    // 清除按钮
    cleard () {
      this.$refs.ruleForm.resetFields()
    },
    created () {
      this.creatData()
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

/* 遮罩 */
.video{
  position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    overflow: hidden;

}
.video .close{
  margin-top: 100px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    z-index: 9999;
}
.box{
    width: 800px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
}
*,:after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
.el-icon-close:before {
    content: "\e6db";
    z-index: 9999;
}
[class*=" el-icon-"], [class^=el-icon-]{
  font-family: element-icons!important;
    /* speak: none; */
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
video {
   margin-top: 50px;
    object-fit: contain;
     width: 800px;
    height: 500px;
}

</style>
